<template>
  <div class="order-product-popor-view">

    <el-popover
      v-if="list.length"
      placement="bottom"
      :width="800"
      trigger="click"
    >
      <template #reference>
        <div style="max-width: 100%;display: flex;align-items: center;justify-content: flex-start">
          <div style="max-width:85%;overflow:hidden;text-overflow: ellipsis;white-space: nowrap;">{{ str }}</div>

          <el-icon
            color="#417ff9"
            style="margin-left: 5px"
          >
            <arrow-down-bold />
          </el-icon>
        </div>
      </template>
      <el-table
        :data="list"
        border
      >
        <el-table-column type="index" />
        <el-table-column
          prop="productPopularName"
          label="通用名"
          header-align="center"
          align="left"
          show-overflow-tooltip
        />
        <el-table-column
          prop="productName"
          label="商品名"
          width="100"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          width="100"
          prop="packSpecs"
          label="包装规格"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
                width="100"
                prop="producer"
                label="生产厂家"
                align="center"
                show-overflow-tooltip
        />
        <el-table-column
          width="100"
          prop="totalAmount"
          label="下单数量"
          align="center"
        >
          <template #default="scope">
            {{ scope.row.putNumber }}{{ getLabel('sell_unit',scope.row.sellUnit) }}
          </template>
        </el-table-column>
        <el-table-column
          width="100"
          prop="deliveryNum"
          label="已发货数量"
          align="center"
        >
          <template #default="scope">
            {{ scope.row.deliveryNum }}{{ getLabel('sell_unit',scope.row.sellUnit) }}
          </template>
        </el-table-column>
        <el-table-column
          width="100"
          align="center"
          label="剩余数量"
        >
          <template #default="scope">
            {{ scope.row.putNumber - scope.row.deliveryNum }}{{ getLabel('sell_unit',scope.row.sellUnit) }}
          </template>
        </el-table-column>
      </el-table>
    </el-popover>

  </div>
</template>

<script>
import {ArrowDownBold} from '@element-plus/icons'
import {defineComponent, reactive, toRefs, watch} from 'vue'

export default defineComponent({
  name: 'ProductPopor',
  components: { ArrowDownBold },
  props: {
    list: {
      type: Array,
      default: [],
    },
  },
  setup(props) {
    var data = reactive({
      str: '',
    })

    watch(
      () => props.list,
      (newval, oldval) => {
        if (newval) {
          if (newval.length) {
            if (newval.length == 1) {
              data.str = newval[0].productPopularName
            } else {
              data.str = '共' + newval.length + '个品种'
            }
          } else {
            data.str = ''
          }
        } else {
          data.str = ''
        }
      },
      { immediate: true, deep: true }
    )

    return {
      ...toRefs(data),
    }
  },
})
</script>

<style scoped>
</style>
